<template>
  <div class="bpmn-com containers">
    <!-- 画布区域 -->
    <div class="canvas" ref="canvas"></div>

    <!-- 侧边栏区域 -->
    <div class="panel" ref="properties"></div>
  </div>
</template>

<script>
import {
  BpmnPropertiesPanelModule, // 基础侧边栏渲染入口
  BpmnPropertiesProviderModule, // 侧边栏属性编辑表单构造器
} from "bpmn-js-properties-panel";
import BpmnModeler from "bpmn-js/lib/Modeler";
import { xmlStr } from "@/mock/index.js";
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'
export default {
  name: "BpmnCom",
  data() {
    return {
      bpmnModeler: null,
      canvas: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.initBpmnModeler();
    },
    initBpmnModeler() {
      this.canvas = this.$refs.canvas;
      this.bpmnModeler = new BpmnModeler({
        container: this.canvas,
        keyboard: { bindTo: document },
        propertiesPanel: {
          parent: this.$refs["properties"], // 侧边栏挂载的 Dom Id
        },
        // 添加到扩展模块内
        additionalModules: [
          BpmnPropertiesPanelModule,
          BpmnPropertiesProviderModule,
        ],
        moddleExtensions: {
          camunda: camundaModdleDescriptor,
        },
      });
      this.createNewDiagram(xmlStr);
    },
    async createNewDiagram(xml) {
      // 将字符串转换成图显示出来
      let newId = this.processId || `Process_${new Date().getTime()}`;
      let newName = this.processName || `业务流程_${new Date().getTime()}`;
      let xmlString = xml;
      // let xmlString = xml || DefaultEmptyXML(newId, newName, this.prefix);
      try {
        let { warnings } = await this.bpmnModeler.importXML(xmlString);
        if (warnings && warnings.length) {
          warnings.forEach((warn) => console.warn(warn));
        }
      } catch (e) {
        console.error(`[Process Designer Warn]: ${e?.message || e}`);
      }

      // 将字符串转换成图显示出来
      // console.log(xmlStr, this.bpmnModeler);
      // this.bpmnModeler.importXML(xmlStr, (err) => {
      //   if (err) {
      //     console.error(err);
      //   } else {
      //     // 这里是成功之后的回调, 可以在这里做一系列事情
      //     this.success();
      //   }
      // });
    },
    success() {
      console.log("ok");
    },
  },
};
</script>

<style lang="scss" scoped>
.containers {
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  .canvas {
    width: 100%;
    height: 100%;
  }
  .panel {
    position: fixed;
    right: 0;
    top: 0;
    width: 300px;
  }
}
</style>
